<style>
.searchbox {
    height: 50px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 10px rgb(150, 150, 150);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.example-showcase .el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.icon {
    margin-left: 10px;
}

/* 选择医生 */
.select {
    margin-top: 20px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 确保每行显示四个医生 */
.doctor {
    width: calc(25% - 10px);
    /* 四分之一宽度减去间隔 */
    background-color: rgb(166, 234, 240);
    box-shadow: 2px 2px 5px rgb(150, 150, 150);
    border-radius: 10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;

    margin: 5px 1px;

    min-height: 260px;
    min-width: 250px;
}

.doctor div {
    margin: 2% 0;
}

.avatar {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: brown;
    margin: 10px;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
}

.introduce {
    padding: 20px;
    height: 45px;
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 溢出的文本显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* 限制为三行 */
    -webkit-box-orient: vertical;
    white-space: normal;
    /* 支持换行 */
}

.costbox {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 选择时间 */
.demo-datetime-picker-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo-datetime-picker-icon .block {
    padding: 5px 5px;
    text-align: center;
}
</style>

<template>
    <!-- 顶部选择条 -->
    <div class="searchbox">
        <el-dropdown>
            <el-button type="primary" style="margin:0 10px;"> 选择科室 </el-button>
            <template #dropdown>
                <el-dropdown-menu v-for="(office, index) in office">
                    <el-dropdown-item @click="handleOfficeChange(office.id)">{{ office.officeName }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-button type="warning" round @click="resetFilter">重置</el-button>
    </div>

    <!-- 选择医生 -->
    <div class="select">
        <div v-for="(doctor, index) in filteredDoctors " :key="index" class="doctor">
            <!-- 头像 -->
            <div class="avatar">
                <img src="https://img2.baidu.com/it/u=1518943175,861072233&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
            </div>
            <div class="nickName">
                <b>{{ doctor.nickName }}</b>
                &nbsp;<span>{{ doctor.officeName }}</span>
            </div>
            <div class="doctorDescribe">简介: {{ doctor.doctorDescribe }}</div>
            <div class="costbox">
                <div class="cost">挂号费: {{ doctor.cost }}元</div>
                <div class="visitorsNumber">剩余: {{ doctor.visitorsNumber }}</div>
                <!-- visitorsNumber remainder-->
            </div>
            <!-- 选择时间 -->
            <!-- selectedTime[index] -->

            <el-date-picker v-model="selectedTime[index]" type="datetime" format="YYYY/MM/DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss " placeholder="请选择日期和时间" />

            <!-- 按钮禁用 -->
            <el-button type="primary" style="margin: 10px;" @click="openModal(doctor, index)"
                :disabled="!selectedTime[index]">挂号</el-button>
        </div>
    </div>
    <!-- 模态框 -->
    <el-dialog v-model="isModalVisible" title="确认挂号">
        <div style="margin: 20px 0;">
            确定要挂号吗？
        </div>
        <el-button @click="isModalVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmRegistration">确认</el-button>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from "axios"
import { CaretLeft, CaretRight } from '@element-plus/icons-vue';
// 引入用户信息存储
import { useUserStore } from '../../store/userInfo'
import { v4 as uuidv4 } from 'uuid'
import { ElLoading } from 'element-plus'

import { useRouter } from 'vue-router'
const router = useRouter()

// 生成随机订单
let uuid = uuidv4()
console.log("预约挂号随机数据", uuid)

const userStore = useUserStore()
console.log("APPuserStore", userStore.userInfo)

// 当前登录的用户id
const storedUser = JSON.parse(localStorage.getItem('loggedInUser'))
console.log("Appintment本地缓存", storedUser)

// 选择的时间,用于存储每个医生的预约时间
const selectedTime = ref([])
// 模态框状态
const isModalVisible = ref(false);
// 筛选医生
const filteredDoctors = ref([])

// 所有科室
const office = ref([])
async function getOffice() {
    try {
        const response = await axios.get("/api/office/getAllOffice")
        office.value = response.data.data
        console.log("预约获取科室信息:", office.value)
    } catch (error) {
        console.error("获取科室数据时出错:", error)
    }
}
getOffice();

// 获取选中的科室下标
function handleOfficeChange(officeId) {
    // 将科室的下标传递给 form.value
    console.log("选中的科室下标:", officeId)

    // 根据选中的科室进行筛选
    filteredDoctors.value = doctors.value.filter(doctor => doctor.officeId === officeId)

    console.log("根据选中的科室进行筛选", filteredDoctors.value)
}

// 获取所有医生信息
const doctors = ref([])
async function getUsers() {
    try {
        const response = await axios.get("/api/arrange/getAll")
        doctors.value = response.data.data

        // 只显示 有排班 的医生信息
        filteredDoctors.value = doctors.value.filter(doctor => doctor.isDelActive != 1 && doctor.visitorsNumber != 0)

        console.log("doctors (all):", doctors.value)
        console.log("filteredDoctors (isDelActive = 0):", filteredDoctors.value)
    } catch (error) {
        console.error("获取医生数据时出错:", error)
    }

}
getUsers();

function resetFilter() {
    filteredDoctors.value = doctors.value
    selectedTime.value = []; // 重置所有预约时间
}

const fullscreenLoading = ref(false)
const openFullScreen1 = () => {
    fullscreenLoading.value = true
    setTimeout(() => {
        fullscreenLoading.value = false
    }, 2000)
}

// 挂号
const registered = ref()
function openModal(doctor, index) {
    storedUser.doctor = doctor
    registered.value = doctor
    isModalVisible.value = true;
}

// 确认挂号
async function confirmRegistration() {

    storedUser.orderid = uuid

    console.log("挂号后本地缓存", storedUser)
    // 添加本地缓存
    localStorage.setItem(
        "loggedInUser",
        JSON.stringify(storedUser)
    )

    // 在新窗口跳转到支付链接
    // window.open(`http://localhost:8085/alipay/pay/${uuid}/${doctor.cost}`)

    // 在当前窗口跳转到支付链接
    window.location.href = `http://localhost:8085/alipay/pay/${uuid}/${registered.value.cost}`

    console.log("确认挂号", registered.value)

    isModalVisible.value = false;

    console.log("挂号成功", registered.value)
    // 刷新页面
    // location.reload()
}
</script>